<template>
	<view class="room-card">
		<view class="img-wrap" @click="previewImg(room.room_img)">
			<image :src="room.room_img" mode="aspectFill"></image>
			<van-icon name="expand-o" size="40rpx" color="#f6f6f6" />
		</view>
		<section>
			<p class="room-name">{{room.name}}</p>
			<p class="max-person-num">可容纳{{room.person}}人</p>
			<view class="checkbox">
				<slot></slot>
			</view>
		</section>
	</view>
</template>

<script>
	export default {
		name: 'room-card',
		props: ['room'],
		methods: {
			previewImg(url) {
				uni.previewImage({
					current: 0,
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss">
	.room-card {
		height: 190rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		
		.img-wrap {
			width: 190rpx;
			height: 190rpx;
			position: relative;
			van-icon {
				position: absolute;
				right: 0;
				top: 0;
			}
			image {
				width: 190rpx;
				height: 100%;
				border-radius: 15rpx;
			}
		}
		section {
			flex: 1;
			height: 160rpx;
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			.room-name {
				font-size: 30rpx;
			}
			.max-person-num {
				font-size: 26rpx;
				color: #6d6969;
			}
			.checkbox {
				margin-top: auto;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
</style>